import React, { FC, memo, forwardRef } from 'react';
import { Row, Col, Form } from 'antd';
import classnames from 'classnames';
import formItemType from './filter.js';
import { pick } from 'lodash';

import styles from './index.less';

const itemProps = [
  'colon',
  'extra',
  'getValueFromEvent',
  'getValueProps',
  'hasFeedback',
  'help',
  'htmlFor',
  // 'id', // It is deprecated because `htmlFor` is its replacement.
  'initialValue',
  'label',
  'labelAlign',
  'labelCol',
  'normalize',
  'required',
  'validateFirst',
  'validateStatus',
  'valuePropName',
  'wrapperCol',
];

const FormItem: FC<any> = ({ item, isNeedLable, rest }) => {
  let { labelCol = 8, wrapperCol } = item;
  //默认宽度
  let formItemLayout = isNeedLable
    ? {
        labelCol: { span: labelCol },
        wrapperCol: { span: wrapperCol ? wrapperCol : 24 - labelCol },
      }
    : { wrapperCol: { span: wrapperCol ? wrapperCol : 24 } };

  const { width, id, style, type, name, className } = item;
  let selfProps = { ...formItemLayout };
  isNeedLable && (selfProps['label'] = name || '');
  let selfWidth = width ? { width: width } : {};

  const itemRest = pick(item, itemProps);

  if (type !== 'button' && id) {
    return (
      <Form.Item
        {...selfProps}
        {...itemRest}
        style={{ ...style, ...selfWidth }}
        className={classnames(styles['form-item-wrap'], className)}
        name={id}
      >
        {formItemType({ ...rest })}
      </Form.Item>
    );
  }

  return (
    <Form.Item
      {...selfProps}
      {...itemRest}
      style={{ ...style, ...selfWidth }}
      className={classnames(styles['form-item-wrap'], className)}
    >
      {formItemType({ ...rest })}
    </Form.Item>
  );
};
//过滤是不是Item,还是单个组件
//过滤是不是需要权限
const FilterLayer: FC<any> = ({ item, index }) => {
  const isNeedLable = item.type.toLowerCase().indexOf('item') !== -1;

  const { style, pos, labelCol = 6, wrapperCol = 18, filter, ...rest } = item;

  //组件是否需要权限权限过滤
  if (typeof filter === 'function') {
    return <FormItem item={item} isNeedLable={isNeedLable} rest={rest} />;
  }

  //单表单
  return <FormItem item={item} isNeedLable={isNeedLable} rest={rest} />;
};

//输出组件
const Toolbar = forwardRef((props: any, ref) => {
  const { modules = [], className, leftSpan, rightSpan, form, ...rest } = props;

  let leftModule = modules.filter((item: any) => {
    return item.pos === 'left' || !item.pos;
  });
  let rightModule = modules.filter((item: any) => {
    return item.pos === 'right';
  });
  const isNeedForm = form ? { form } : {};

  return (
    <Row className={classnames(styles['tool-wrap'], className)}>
      <Form layout={'inline'} className={styles['form-wrap']} {...isNeedForm} {...rest}>
        <Col span={leftSpan || 24} key={'left'} className={styles['left']}>
          {leftModule.map((item: any, index: number) => {
            return <FilterLayer key={index.toString(36) + index} item={item} index={index} />;
          })}
        </Col>
        <Col
          className={styles['right']}
          key={'right'}
          span={leftSpan && rightSpan ? rightSpan : 24 - (leftSpan || 0)}
        >
          {rightModule.map((item: any, index: number) => {
            return <FilterLayer key={index.toString(36) + index} item={item} index={index} />;
          })}
        </Col>
      </Form>
    </Row>
  );
});

export default memo(Toolbar);
